<template>
  <ActionPanel>
    <ElTable :data="data">
      <ElTableColumn prop="name" label="名称" :width="120">
        <template #="{ row }">
          <ElInput v-model="row.name" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="类型" :width="120">
        <template #="{ row }">
          <ElSelect v-model="row.type">
            <ElOption v-for="(label, key) in relationTypes" :label="label" :value="key" :key="key" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="标签" :width="120">
        <template #="{ row }">
          <ElInput v-model="row.label" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="注释" :width="150">
        <template #="{ row }">
          <ElInput v-model="row.comment" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="当前列" :width="120">
        <template #="{ row }">
          <ElSelect v-model="row.selfColumn">
            <ElOption v-for="(column, columnName) in selfColumnOptions" :label="column.label" :value="columnName" :key="columnName" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="目标" :width="200">
        <template #="{ row }">
          <TargetEditor v-model:seed-name="row.seedName" v-model:column="row.targetColumn" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="级联模式" :width="120">
        <template #="{ row }">
          <ElSelect v-model="row.cascade" :disabled="row.type === 'belongsTo'">
            <ElOption v-for="(value, key) in cascadeOptions" :label="value" :value="key" :key="key" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="数据条数" :width="120">
        <template #="{ row }">
          <ElInputNumber v-model="row.limit" controls-position="right" :disabled="!['hasMany', 'habtm'].includes(row.type)" class="wfull" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="关联" :width="300">
        <template #="{ row }">
          <ThroughEditor
            v-model:seed-name="row.throughSeedName"
            v-model:self-column="row.throughSelfColumn"
            v-model:target-column="row.throughTargetColumn"
            :disabled="'habtm' !== row.type"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn label="扩展">
        <template #="{ row }">
          <ExtraEditor v-model:extra-type="row.extraType" v-model:extra="row.extra" />
        </template>
      </ElTableColumn>
      <ElTableColumn :width="60">
        <template #header>
          <ElButton type="primary" size="small" link @click="add">新增</ElButton>
        </template>
        <template #="{ $index }">
          <ElButton type="danger" size="small" link @click="remove($index)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElInputNumber } from 'element-plus'
  import { getSeed } from '@/views/seed-dev'
  import { computed, inject, ref } from 'vue';
  import feedback from '@/utils/feedback';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { cascadeOptions, relationTypes } from '..';
  import TargetEditor from './TargetEditor.vue';
  import ExtraEditor from './ExtraEditor.vue';
  import ThroughEditor from './ThroughEditor.vue';

  const props = defineProps<{seedName?: string}>()
  const selfColumnOptions = computed(() => getSeed(props.seedName).columns)

  const data = ref<any[]>([])

  function add() {
    data.value.push({})
  }

  function remove(index: number) {
    data.value.splice(index, 1)
  }

  const close = inject<() => void>(closePopupKey, void 0)
  function validate() {
    for(const i in data.value) {
      const row = data.value[i]
      const name = row.name
      if (!name) {
        feedback.alertError(`第${parseInt(i) + 1}行名称不能为空`)
        return false
      }
    }

    return true
  }

  function doSave() {
    if(data.value.length === 0 || !validate()) return

    const seed = getSeed(props.seedName)
    for(const row of data.value) {
      if(!row.type) continue

      const type = row.type
      if(!seed[type]) seed[type] = {}
      const name = row.name
      delete row.name
      seed[type][name] = row
    }
    
    close?.()
  }
</script>